<template>
  <div class="layout">
    <div class="fianceCon">
      <div style="display: flex; justify-content: space-between">
        <Breadcrumb class="breadcrumb" :crumbs="crumbs"></Breadcrumb>
        <!-- <div class="backBtn" @click="goBack()">返回</div> -->
      </div>
      <div class="title">
        <div class="tex">
          {{ detail && detail.productTitle }}
        </div>
        <!-- && detail.isApply==1 -->
        <!-- <div v-if="detail.type != 6 " class="btn" @click="LoansApply(detail)">
          立即申请
        </div> -->
        <!-- <div v-if="detail.type != 6" :class="get_btn_data(detail).class" @click="LoansApply(get_btn_data(detail))">
          {{get_btn_data(detail).text}}
        </div> -->
      </div>
      <div class="policyMsgTable">
        <div class="policyMsgRow">
          <div class="policyMsgCellTitle">合作银行</div>
          <div class="policyMsgCell">{{ getBank(detail && detail.bank) }}</div>
          <div class="policyMsgCellTitle">金融产品类型</div>
          <div class="policyMsgCell">{{ getType(detail && detail.type) }}</div>
        </div>
        <div class="policyMsgRow">
          <div class="policyMsgCellTitle">贷款对象</div>
          <div class="policyMsgCell">{{ getObject(detail && detail.object) }}</div>
          <div class="policyMsgCellTitle">贷款金额</div>
          <div class="policyMsgCell">{{ getAmount(detail && detail.amount) }}</div>
        </div>
        <div class="policyMsgRow">
          <div class="policyMsgCellTitle">发布部门</div>
          <div class="policyMsgCell">
            {{ getDepartment(detail.publishDepartment) }}
          </div>
          <div class="policyMsgCellTitle">发布时间</div>
          <div class="policyMsgCell">{{ detail.publishTime }}</div>
        </div>
        <div class="policyMsgRow">
          <div class="policyMsgCellTitle">申报期限</div>
          <div class="policyMsgCell">
            {{ detail.applyStartTime }}至{{ detail.applyEndTime }}
          </div>
          <div class="policyMsgCellTitle">浏览量</div>
          <div class="policyMsgCell">{{ detail.views }}</div>
        </div>
      </div>
      <div class="explainBox">
        <div class="explainTitle">
          <div class="con">
            <pre v-html="detail.productDetail"></pre>
          </div>
          <div class="download">
            <div class="dowtit">附件下载：</div>
            <div class="dowcon">
              <div
                class="item"
                v-for="item in fileList"
                :key="item.id"
                @click="fileBtn(item)"
              >
                {{ item.fileName }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-btn-div">
        <Buttons :buttons="buttons" @apply="apply()" @goBack="goBack"></Buttons>
      </div>
    </div>
  </div>
</template>
<script>
import { request } from "@/utils/request.js";
import { host } from "@/utils/config.js";
import {
  isLogin,
  setLastUrl,
} from "@/utils/util.js";
import { getProductDetail } from "@/common/api/finance"

import config from '@/utils/config.js'
import Breadcrumb from "@/components/breadcrumb";
// import BottomBtns from '@/components/BottomBtns';
export default {
  data() {
    return {
      crumbs: [
        {
          label: "金融服务",
          value: "finance",
        },
        {
          label: "金融产品清单",
          value: "financeProduct",
        },
        {
          label: "金融产品详情",
          value: "",
          choose: true,
        },
      ],
      productId: null,
      detail: null,
      fileList: [],
      bottomBtns: []
    };
  },
  components: {
    Breadcrumb,
    // BottomBtns
  },
  computed: {
    buttons(){
      let btns = [{text:"返回",type:"normal",size:"l",method:"goBack"}]
      if (this.detail.applyStateId == 3) {
        btns.push({text:"申请已结束",type:"success",size:"l",method:"none",disabled:"true"})
      } else if (this.detail.isApply == 2) {
        btns.push({text:"已申请",type:"success",size:"l",method:"none",disabled:"true"})
      } else if (this.detail.applyStateId == 1) {
        btns.push({text:"未开始",type:"success",size:"l",method:"none",disabled:"true"})
      } else {
        btns.push({text:"立即申请",type:"success",size:"l",method:"apply"})
      }
      return btns;
    },
    getBank() {
      return function (data) {
        let bankList = JSON.parse(localStorage.getItem("bankList") || "[]");
        let obj = bankList.find((item) => item.dictValue == data);
        return obj && obj.dictLabel;
      };
    },
    getType() {
      return function (data) {
        let typeList = JSON.parse(localStorage.getItem("typeList") || "[]");
        if (typeList.length) {
          let obj = typeList.find((item) => item.dictValue == data);
          return obj && obj.dictLabel;
        }
      };
    },
    // 贷款对象
    getObject() {
      return function (data) {
        let objList = JSON.parse(localStorage.getItem("objList") || "[]");
        if (objList.length) {
          let obj = objList.find((item) => item.dictValue == data);
          return obj && obj.dictLabel;
        }
      };
    },
    getAmount() {
      return function (data) {
        let moneyList = JSON.parse(localStorage.getItem("moneyList") || "[]");
        if (moneyList.length) {
          let obj = moneyList.find((item) => item.dictValue == data);
          return obj && obj.dictLabel;
        }
      };
    },
    getDepartment() {
      return function (data) {
        let departmentList = JSON.parse(
          localStorage.getItem("departmentList") || "[]"
        );
        if (departmentList.length) {
          let obj = departmentList.find((item) => item.dictValue == data);
          return obj && obj.dictLabel;
        }
      };
    },
    get_btn_data() { // 获取按钮状态
      return function(item) {
        if (item.applyStateId == 3) {
          return {class: "btn disable", text: "申请已结束", type: "disable", func: null}
        } else if (item.isApply == 2 && isLogin()) {
          return {class: "btn disable", text: "已申请", type: "disable", func: null}
        } else if (item.applyStateId == 1) {
          return {class: "btn disable", text: "未开始", type: "disable", func: null}
        } else if (item.applyStateId == 2) {
          return {
            class: "btn primary", text: "立即申请", type: "default", 
            func: () => {
              this.$CheckRole('金融产品申请', () => {
                this.LoansApply(item)
              })
            }
          }
        }
      }
    },
  },
  activated() {
    // 通过路由获取产品id
    if (this.$route.query.productId) {
      this.productId = this.$route.query.productId;
      this.getProductDetail();
    }
  },
  methods: {
    /**
     * 返回上一页
     */
    goBack() {
      this.$router.back();
    },
    apply(){
      let ns = this
      this.$CheckRole('金融产品申请', () => {
        this.LoansApply(ns)
      })
    },
    // 字典查询 政策类别
    async gettypeList() {
      let api = `finance_product_type,finance_product_bank,finance_product_amount,finance_product_term`;
        // 调用公共方法中的查询字典表
        this.getDictList(this,api).then(res => {
          //  金融产品类型
          this.typeList = res.finance_product_type;

          //  贷款银行
          this.bankList = res.finance_product_bank;
          //  贷款金额
          this.moneyList = res.finance_product_amount;
          //  贷款期限
          this.termList = res.finance_product_term;
        })
    },
    // 获取详情数据
    async getProductDetail() {
      // let api = `${host}/finance/financeProduct/get/${this.productId}`;
      let res = await getProductDetail(this.productId);
      console.log('res', res)
      let { code , data, msg } = res
      if (code != '200') return this.$message.warning(msg)
      if (data) {
        this.detail = data
        this.agetFile(data.file)
      }
    },
    // 附件列表
    async agetFile(id) {
      let api = `${host}/system/file/list`;
      let param = {
        batchId: id,
      };
      let res = await request(this, api, param, "GET");
      console.log("123", res);
      if (res.rows.length) {
        this.fileList = res.rows;
      }
    },
    // 跳转金融产品申请页
    LoansApply(data) {
      if (!isLogin()) {
        setLastUrl(window.location.href);
        this.$router.push({ path: "login" });
      }else {
        if (data.type == "disable") return false;
        let productId = this.productId;
        this.$router.push({
          path: "/finance/financialLoansApply",
          query: {
            productId,
          },
        });
      }
      
    },
    // 资料下载
    fileBtn(data) {
      // window.location.href = data.filePath;
      let ns = this;
      console.log(data)
      request(ns, `${config.api.download}?fileUrl=${data.filePath}&fileName=${data.fileName}`,{},"GET",{},false,'',"blob" )
        .then(res => {
            let blob = new Blob([res], { type: "application/x-xls" });　　//res--后台返回的文件流
      　　　 let link = document.createElement("a");
            link.href = window.URL.createObjectURL(blob);
            link.download = data.fileName;
            link.click();
        })
    },
  },
};
</script>
<style scoped>
.breadcrumb {
  width: 1200px;
  margin-bottom: 30px;
}
.fianceCon {
  width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
}
.fianceCon .backBtn {
  border: 1px solid #eeeeee;
  white-space: nowrap;
  font-size: 12px;
  height: 30px;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;
}
.fianceCon .title {
  text-align: left;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}
.fianceCon .title .tex {
  font-size: 24px;
  font-weight: 700;
}
.fianceCon .title .btn {
  width: 120px;
  height: 40px;
  line-height: 40px;
  background: #045db9;
  border-radius: 3px;
  color: #ffffff;
  text-align: center;
  cursor: pointer;
}
.fianceCon .title .grey {
  background: #f1f2f4;
  color: #999;
  cursor: default;
}
.fianceCon .policyMsgTable {
  border: 1px solid #e1e1e1;
  font-size: 15px;
  color: #666666;
  margin-bottom: 30px;
  border-bottom: none;
}
.fianceCon .policyMsgTable .policyMsgRow {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e1e1e1;
}

.fianceCon .policyMsgTable .policyMsgRow .policyMsgCellTitle {
  padding: 15px 0;
  width: 120px;
  text-align: center;
  background-color: #f4f4f4;
}
.fianceCon .policyMsgTable .policyMsgRow .policyMsgCellTitle2 {
  padding: 15px 0;
  width: 115px;
  text-align: center;
  background-color: #f4f4f4;
}
.fianceCon .policyMsgTable .policyMsgRow .policyMsgCell {
  padding: 15px 20px;
  text-align: left;
  width: 400px;
  box-sizing: border-box;
}
.fianceCon .policyMsgTable .policyMsgRow .policyMsgCell2 {
  padding: 15px 20px 15px 24px;
  text-align: left;
  flex: 1;
  box-sizing: border-box;
}
.fianceCon .explainBox {
  border: 1px solid #eeeeee;
  padding: 24px 14px;
}
.fianceCon .explainBox .explainTitle {
  margin-bottom: 30px;
}
.fianceCon .explainBox .explainTitle .tit {
  font-size: 18px;
  font-weight: 700;
  text-align: left;
  color: #045db9;
  position: relative;
  margin-left: 14px;
}
.fianceCon .explainBox .explainTitle .tit:after {
  content: "";
  position: absolute;
  left: -14px;
  top: 3px;
  width: 3px;
  height: 18px;
  background: #045db9;
}
.fianceCon .explainBox .explainTitle .con {
  font-size: 14px;
  color: #666666;
  line-height: 24px;
  text-align: left;
  margin-left: 14px;
  margin-top: 10px;
  word-break: break-all;
}
.fianceCon .explainBox .download {
  display: flex;
  margin-top: 30px;
  margin-left: 10px;
}
.fianceCon .explainBox .download .dowtit {
  font-size: 14px;
  color: #666666;
}
.fianceCon .explainBox .download .dowcon {
  flex: 1;
  margin-left: 12px;
  text-align: left;
}
.fianceCon .explainBox .download .dowcon .item {
  color: #045db9;
  font-size: 14px;
  margin-bottom: 12px;
  cursor: pointer;
}
.fianceCon .explainBox .download .dowcon .item:last-child {
  margin-bottom: 0;
}
</style>